<template>
	<view class="adup-xcbz page-bg">
		<view class="fm-title">
			<view class="title"><label class="line-icon" :style="{'background': '#00c3c3'}"></label>行程报账</view>
			<u-button :loading="sb.load" type="success" @click="submitFm">
				<u-icon v-if="!sb.load" name="edit-pen-fill" color="#fff" :custom-style="{'margin-right': '10rpx'}"></u-icon>
				提交修改
			</u-button>
		</view>
		
		<u-form :model="fm" ref="bzfm" v-if="fm">
			<view class="my-fm">
				<view class="f-item no-box">
					<u-form-item>
						<view class="i-row">
							<view class="r-title">打单费</view>
							<view class="r-con">
								<u-input 
									v-model="fm.singleFee" 
									:type="'digit'" 
									:input-align="'right'"
									:clearable="false"
									:custom-style="{'color': '#00C3CE'}"
									placeholder="请填写打单费（选填）"
								/><label class="i-r-text">元</label>
							</view>
						</view>
					</u-form-item>
					
					<u-form-item>
						<view class="i-row">
							<view class="r-title">洗车费</view>
							<view class="r-con">
								<u-input 
									v-model="fm.washingFee" 
									:type="'digit'" 
									:input-align="'right'"
									:clearable="false"
									:custom-style="{'color': '#00C3CE'}"
									:placeholder="'请输入洗车费（选填）'"
								/><label class="i-r-text">元</label>
							</view>
						</view>
					</u-form-item>
					
					<u-form-item>
						<view class="i-collspan-row">
							<view class="icr-title">停车费
								<label class="icr-text c-yellow">{{fm.parkingFeeList.length}}条记录，共{{allParkingFee}}元</label>
							</view>
							<view class="icr-ul">
								<view 
									class="icr-li"
									v-for="(it, index) in fm.parkingFeeList"
									:key="index">
									<view 
										class="li-left-item" 
										@click="setMpMd({show: true, name: 'parkingFeeList', nameIndex: index})">
										<label class="li-title-icon">
											<u-icon name="map-fill" color="#2979ff" size="40"></u-icon>
										</label>
										<view class="li-con">
											<view class="li-c-text">
												<label class="c-qgreen" v-if="it.address">{{it.address.split(' ')[1]}}</label>
												<label :style="{'color': '#bbb'}" v-else>请选择停车地点</label>
											</view>
											<u-icon
												class="li-cr-icon" 
												:name="'arrow-down-fill'" 
												:color="'#bbb'"
												@click="addParkingFee(index)"
											></u-icon>
										</view>
									</view>
									
									<view class="li-right-item" :style="{'width': index == 0 ? '235rpx' : '175rpx'}">
										<label class="li-title-icon">
											<u-icon name="rmb-circle-fill" color="#ff9900" size="40"></u-icon>
										</label>
										<view class="li-con">
											<input
												class="li-inp"
												v-model="it.money"
												:type="'digit'" 
												:maxlength="5"
												:placeholder="'金额'"
											/><label class="li-cr-text">元</label>
										</view>
									</view>
									
									<u-icon
										v-if="index == 0"
										class="li-r-icon" 
										:name="'plus-circle-fill'" 
										:color="'#19be6b'"
										:size="40"
										@click="adupParkingFee(1, index)"
									></u-icon>
									<template v-else>
										<u-icon
											class="li-r-icon" 
											:name="'plus-circle-fill'" 
											:color="'#19be6b'"
											:size="40"
											@click="adupParkingFee(1, index)"
										></u-icon>
										<u-icon
											:style="{'margin-left': '20rpx'}"
											class="li-r-icon" 
											:name="'close-circle-fill'" 
											:color="'#fa3534'"
											:size="40"
											@click="adupParkingFee(0, index)"
										></u-icon>
									</template>
								</view>
							</view>
						</view>
					</u-form-item>
					
					<u-form-item>
						<view class="i-row">
							<view class="r-title">过路费</view>
							<view class="r-con">
								<u-input 
									v-model="fm.roadFee" 
									:type="'digit'" 
									:input-align="'right'"
									:clearable="false"
									:custom-style="{'color': '#00C3CE'}"
									:placeholder="'请输入过路费（选填）'"
								/><label class="i-r-text">元</label>
							</view>
						</view>
					</u-form-item>
					
					<u-form-item>
						<view class="i-row">
							<view class="r-title">用餐费</view>
							<view class="r-con">
								<u-input 
									v-model="fm.livingFee" 
									:type="'digit'" 
									:input-align="'right'"
									:clearable="false"
									:custom-style="{'color': '#00C3CE'}"
									:placeholder="'请输入用餐费（选填）'"
								/><label class="i-r-text">元</label>
							</view>
						</view>
					</u-form-item>
					
					<u-form-item>
						<view class="i-row">
							<view class="r-title">买水费</view>
							<view class="r-con">
								<u-input 
									v-model="fm.waterFee" 
									:type="'digit'" 
									:input-align="'right'"
									:clearable="false"
									:custom-style="{'color': '#00C3CE'}"
									:placeholder="'请输入买水费（选填）'"
								/><label class="i-r-text">元</label>
							</view>
						</view>
					</u-form-item>
					
					<u-form-item>
						<view class="i-row">
							<view class="r-title">住宿费</view>
							<view class="r-con">
								<u-input 
									v-model="fm.stayFee" 
									:type="'digit'" 
									:input-align="'right'"
									:clearable="false"
									:custom-style="{'color': '#00C3CE'}"
									:placeholder="'请输入住宿费（选填）'"
								/><label class="i-r-text">元</label>
							</view>
						</view>
					</u-form-item>
					
					<u-form-item>
						<view class="i-row">
							<view class="r-title">其他费</view>
							<view class="r-con">
								<u-input 
									v-model="fm.otherFee" 
									:type="'digit'" 
									:input-align="'right'"
									:clearable="false"
									:custom-style="{'color': '#00C3CE'}"
									:placeholder="'请输入其他费（选填）'"
								/><label class="i-r-text">元</label>
							</view>
						</view>
					</u-form-item>
					
					<u-form-item>
						<view class="i-row-textarea">
							<view class="r-title">备注</view>
							<view class="r-con">
								<u-input
									v-model="fm.xcbzRemark" 
									:type="'textarea'" 
									:custom-style="{'color': '#00C3CE'}"
									:placeholderStyle="'color: #f000000;'"
									:clearable="false"
									:auto-height="true"
									:height="150"
									:maxlength="200"
									:placeholder="'请填写报账备注，最多输入200个字（选填）'"/>
							</view>
						</view>
					</u-form-item>
					
					<u-form-item :border-bottom="false">
						<view class="i-row-textarea">
							<view class="r-title">报账凭证<label class="r-title-tip">（最多上传6张图片）</label></view>
							<view class="r-con">
								<u-upload 
									ref="bzUf"
									width="200" 
									height="200" 
									max-count="6"
									:file-list="fm.uflist"
									:action="ufAction"
									:header="ufHeader"
									:name="'files'"
									:form-data="{ftype: fm.bzType.key+'_IMG', orderNum: fm.orderNum, uid: fm.uid}"
									:max-size="1024*1024*30"
								></u-upload>
							</view>
						</view>
					</u-form-item>
				</view>
			</view>
		</u-form>
		
		<MapSearchList v-if="mpMd.show" :name="mpMd.name" :nameIndex="mpMd.nameIndex" @myClick="setMpMd"></MapSearchList>
		<u-toast ref="qtoast" />
	</view>
</template>

<script>
	import MapSearchList from '@/components/map-search-list/map-search-list.vue';
	
	export default {
		components: { MapSearchList },
		data() {
			return {
				// 行程报账停车费金额输入框样式
				inpBtnStyl: {'color': '#00C3CE', 'padding-right': '30rpx'},
				
				// 文件上传地址
				ufAction: this.C.upfileUrl,
				// 文件上传请求头信息
				ufHeader: {'token': uni.getStorageSync(this.C.uuid)},
				// 旧文件数据
				flist: [],
				
				// 表单对象
				fm: null,
				// 提交按钮
				sb: {load: false},
				
				// 地图弹框
				mpMd: {show: false, name: '', nameIndex: ''}
			}
		},
		onLoad(e){
			console.log('传入的参数', e);
			
			this.getBzDetail(e.id);
		},
		computed: {
			// 行程收支停车费总金额
			allParkingFee: function(){
				let total = 0;
				if(this.fm && this.fm.parkingFeeList){
					this.fm.parkingFeeList.forEach(it => { total += Number(it.money); });
				}
				return total;
			}
		},
		methods: {
			// 打开地图地址选择列表
			setMpMd(e){
				const that = this, md = that.mpMd, fm = that.fm;
			
				if(e.show){
					// 准备数据
					md.name = e.name;
					md.nameIndex = e.nameIndex;
				}else{
					console.log('子组件传入的数据', e);
					if(e.obj){// 存在地点数据对象
						fm[e.name][e.nameIndex].address = `${e.obj.area.split('-')[1]} ${e.obj.name}`;
						fm[e.name][e.nameIndex].lnglat = e.obj.lnglat;
					}
				}
				
				that.mpMd.show = e.show;
			},
			/**
			 * 添加/删除-停车费详情
			 * @param {Object} type 操作类型 1-添加 0-删除
			 * @param {Object} index 下标
			 */
			adupParkingFee(type, index){
				let that = this, U = that.U, pklist = U.scopy(that.fm.parkingFeeList);
				console.log('传入的值', type, index);
				if(type == 0){
					that.U.qconfim('确定删除吗？', function(e){
						if(e.confirm) {
							pklist.splice(index, 1);
							that.fm.parkingFeeList = pklist;
						}
					});
				}else{
					let arr = [];
					pklist.forEach((it, i) => {
						arr.push(it);
						if(i == index) arr.push({address: '', lnglat: '', money: ''});
					});
					that.fm.parkingFeeList = arr;
					
					console.log('新增的结果', that.fm.parkingFeeList);
				}
			},
			
			// 获取-行程报账记录详情
			getBzDetail(id){
				const that = this;
				
				that.$u.api.getBzDetail({id: id}).then(res => {
					if(res.code == 1){
						let o = res.data;
						
						// 根据报账类型初始化对应数据
						let p = {};
						// 修改对象id
						p.uid = o.id;
						// 报账类型
						p.bzType = o.jzType;
						// 订单编号
						p.orderNum = o.orderNum;
						// 打单费
						p.singleFee = o.singleFee ? o.singleFee : '';
						// 洗车费
						p.washingFee = o.washingFee == 0 ? '' : o.washingFee;
						// 停车费用详情
						let pklist = o.parkingFeeDetail;
						p.parkingFeeList = [];
						if(pklist && pklist.length > 0){
							pklist.forEach(it => {
								p.parkingFeeList.push({address: it.position, lnglat: it.lngLat, money: it.parkingFee+''});
							});
						}else{
							p.parkingFeeList = [{address: '', lnglat: '', money: ''}];
						}
						// 过路费
						p.roadFee = o.roadFee == 0 ? '' : o.roadFee;
						// 过路费类型 0-现金 1-ETC
						p.roadFeeType = 0,
						// 用餐费
						p.livingFee = o.livingFee == 0 ? '' : o.livingFee;
						// 买水费
						p.waterFee = o.waterFee == 0 ? '' : o.waterFee;
						// 住宿费
						p.stayFee = o.stayFee == 0 ? '' : o.stayFee;
						// 其他费
						p.otherFee = o.otherFee == 0 ? '' : o.otherFee;
						// 备注
						p.xcbzRemark = o.remark;
						// 图片id
						p.fids = [];
						// 默认图片数组
						let flist = [];
						if(o.reimVoucherUrl){
							let fs = o.reimVoucherUrl.split(',');
							fs.forEach(it => { flist.push({id: it.split('=')[0], url: that.C.imgUrl+it.split('=')[1]}); });
						}
						that.flist = flist; // 保存起来
						p.uflist = flist;
						
						that.fm = p;
						console.log('赋值', that.fm);
					}
				});
			},
			// 表单验证
			valFm(){
				const that = this, U = that.U, FV = that.FV;
				let fg = true, ps = U.scopy(that.fm), p = {};;
				
				p.uid = ps.uid;
				p.orderNum = ps.orderNum;
				
				if(fg){
					let singleFee = ps.singleFee;
					if(singleFee){
						if(!FV.isFloat(singleFee)){
							fg = U.qinfo('打单费格式错误');
						}else{
							p.singleFee = singleFee;
						}
					}
				}
				
				if(fg){
					let washingFee = ps.washingFee;
					if(washingFee){
						if(!FV.isFloat(washingFee)){
							fg = U.qinfo('洗车费格式错误');
						}else{
							p.washingFee = washingFee;
						}
					}
				}
				
				// 处理停车费详情
				if(fg){
					let parkingFeeList = ps.parkingFeeList, parkingFeeArr = [];
					for(let i = 0; i < parkingFeeList.length; i++){
						let it = parkingFeeList[i];
						if(it.address && !it.money){
							fg = U.qinfo('请填写第'+(i+1)+'项停车位置');
							break;
						}else if(!it.address && it.money){
							fg = U.qinfo('请填写第'+(i+1)+'项停车费用');
							break;
						}else if(!it.address && !it.money){
							// 记录不止一条才验证
							if(parkingFeeList.length != 1){
								fg = U.qinfo('请将第'+(i+1)+'项停车详情补充完整');
								break;
							}
						}else if(!FV.isFloat(it.money)){
							fg = U.qinfo('第'+(i+1)+'项停车费用格式错误');
							break;
						}else{
							// 地址=坐标=金额
							parkingFeeArr.push(it.address+'='+it.lnglat+'='+it.money);
						}
					}
					
					if(parkingFeeArr.length > 0) p.parkingFees = parkingFeeArr.join(';');
				}
				
				if(fg){
					let roadFee = ps.roadFee;
					if(roadFee){
						if(!FV.isFloat(roadFee)){
							fg = U.qinfo('过路费格式错误');
						}else{
							p.roadFee = roadFee;
							p.roadFeeType = ps.roadFeeType;
						}
					}
				}
				
				if(fg){
					let livingFee = ps.livingFee;
					if(livingFee){
						if(!FV.isFloat(livingFee)){
							fg = U.qinfo('用餐费格式错误');
						}else{
							p.livingFee = livingFee;
						}
					}
				}
				
				if(fg){
					let waterFee = ps.waterFee;
					if(waterFee){
						if(!FV.isFloat(waterFee)){
							fg = U.qinfo('买水费格式错误');
						}else{
							p.waterFee = waterFee;
						}
					}
				}
				
				if(fg){
					let stayFee = ps.stayFee;
					if(stayFee){
						if(!FV.isFloat(stayFee)){
							fg = U.qinfo('住宿费格式错误');
						}else{
							p.stayFee = stayFee;
						}
					}
				}
				
				if(fg){
					let otherFee = ps.otherFee;
					if(otherFee){
						if(!FV.isFloat(otherFee)){
							fg = U.qinfo('其他费格式错误');
						}else{
							p.otherFee = otherFee;
						}
					}
				}
				
				if(fg){
					let xcbzRemark = ps.xcbzRemark;
					if(xcbzRemark && xcbzRemark.length > 200){
						fg = U.qinfo('[备注]最多填写200个字');
					}else{
						p.remark = xcbzRemark;
					}
				}
				
				if(fg){
					let uflist = that.$refs.bzUf.lists;
					if(uflist.length == 0){
						fg = U.qinfo('至少需要上传一张凭证图片');
					}else{
						let fids = [];
						uflist.forEach(it => {
							if(it.url && it.url.indexOf('_img') != -1){// 本地图片
								let is = that.flist.find(fit => it.url.indexOf(fit.url) != -1);
								fids.push(is.id);
							}else{// 新传图片
								if(it.response && it.response.data) fids.push(it.response.data[0]);
							}
						});
						if(fids.length == 0){
							fg = U.qinfo('上传图片'+uflist.length+'张，成功'+fids.length+'张');
						}else{
							p.fids = fids.join(',');
						}
					}
				}
				
				return fg ? p : fg;
			},
			// 提交表单
			submitFm(){
				let that = this, ps = that.valFm(), U = that.U, sb = that.sb;
				console.log('提交参数', ps);
				if(ps != false){
					sb.load = true;
					that.$u.api.adupOrderRouteBz(ps).then((res) => {
						if (res.code != 1) {
							sb.load = false;
						} else {
							U.qtoast(that, { 
								title: res.msg,
								type: 'success',
								duration: 1000,
								callback: function(){
									sb.load = false;
									
									// 刷新父级列表（刷新未报销的列表）
									uni.$emit('refJzList', 0);
									// 返回上一页
									uni.navigateBack({ delta: 1 });
								}
							});
						}
					}).catch(err => { sb.load = false; });
				}
			}
		}
	}
</script>

<style lang="scss">
.adup-xcbz{
	padding-top: 80rpx;
	padding-bottom: 10rpx;
	
	.f-item{
		margin: 10rpx !important;
	}
}
</style>
